.rank-list {
  &__container {
  }

  &__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 35vh;
    border-radius: 50%;
    background: url('~@/assets/images/sky.jpg') no-repeat center;
    background-size: contain;
    transform: scale(2, 2);
    z-index: -1;
  }

  &__wrap {
    display: flex;
    align-items: center;
    height: 140px;
    padding: 2vw 5vw;
    border-bottom: #d7d7d7 1px solid;
    font-size: 0.6em;

    &--header {
      height: 80px;
    }

    .number {
      color: #999;
      font-size: 1.2em;
      font-weight: bold;
    }

    .avatar {
      width: 14vw;
      height: 14vw;
      margin: 0 5vw;
      border: #d7d7d7 1px solid;
      border-radius: 50%;
    }

    .name {
      color: #333;
      font-size: 1.2em;
      font-weight: bold;
    }

    .realname {
      color: #666;
      font-size: 0.8em;
      font-weight: normal;
    }

    .score {
      margin-left: auto;
      font-size: 0.5em;

      /*
        这种也可以实现单个元素右对齐
        flex: 1;
        text-align: right;
      */
    }

    &--champion {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 20vw 0 10vw 0;
      font-size: 0.6em;

      .decoration {
        width: 15vw;
        height: 15vw;
        transform: translate(10vw, 8vw) rotate(60deg);
      }

      .avatar {
        width: 25vw;
        height: 25vw;
        margin-bottom: 3vw;
        border: #fff 10px solid;
        border-radius: 50%;
      }

      .name {
        margin-bottom: 1vw;
        color: #333;
        font-size: 1.2em;
        font-weight: bold;
      }

      .realname {
        display: flex;
        justify-content: space-between;
        color: #666;
        font-size: 0.9em;
        font-weight: normal;

        .score {
          color: #444;
          font-weight: bold;
        }
      }
    }
  }
}
